<template>
  <UModal
    :title="title"
    :dismissible="dismissible"
    :description="description"
    :ui="{ footer: 'justify-end' }"
  >
    <template #footer>
      <UButton
        :label="confirmText"
        @click="handleConfirm"
      />
      <UButton
        v-if="cancel"
        variant="ghost"
        :label="cancelText"
        @click="handleClose"
      />
    </template>
  </UModal>
</template>

<script setup lang="ts">
const {
  title = "提示",
  description,
  dismissible = true,
  confirmText = "确认",
  cancelText = "取消",
  onConfirm,
  onCancel,
  cancel = false,
} = defineProps<{
  title: string;
  dismissible?: boolean;
  confirmText?: string;
  cancelText?: string;
  description: string;
  cancel?: boolean;
  onConfirm: () => void;
  onCancel?: () => void;
}>();

const emit = defineEmits<{ close: [boolean] }>();

async function handleConfirm() {
  await onConfirm();
  emit("close", false);
}

async function handleClose() {
  onCancel && (await onCancel());
  emit("close", false);
}
</script>
